<template>
  <div class="header" :style="{background:backColor,'box-shadow':boxShadow}">
    <div class="nav" @mouseover="slideAnimation">
      <!-- <div class="logo"> -->
      <!-- <img v-if="showWhite" src="../assets/logo-white.png" class="logo">
      <img v-else src="../assets/logo.png" class="logo"> -->
      <!-- </div> -->
      <ul>
        <li>
          <router-link to="/dashboard" :style="{color:color}">首页</router-link>
          <span :style="{background:slideColor}" />
        </li>
        <li>
          <router-link to="/applets" :style="{color:color}">小程序</router-link>
          <span :style="{background:slideColor}" />
        </li>
        <li>
          <router-link to="/customization" :style="{color:color}">定制化方案</router-link>
          <span :style="{background:slideColor}" />
        </li>
        <li>
          <router-link to="/case" :style="{color:color}">成功案例</router-link>
          <span :style="{background:slideColor}" />
        </li>
        <li>
          <router-link to="/news" :style="{color:color}">最新资讯</router-link>
          <span :style="{background:slideColor}" />
        </li>
        <li>
          <router-link to="/about" :style="{color:color}">关于匠把头</router-link>
          <span :style="{background:slideColor}" />
        </li>
        <li>
          <a :style="{color:color,cursor:'default'}">
            <i class="el-icon-phone-outline" />400-8888-8888
          </a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      activeIndex: '1',
      backColor: '#252533',
      color: 'white',
      slideColor: 'white',
      showWhite: true,
      boxShadow: ''
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0
    // 首先，在mounted钩子window添加一个滚动滚动监听事件
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 然后在方法中，添加这个handleScroll方法来获取滚动的位置
    handleScroll() {
      const scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      const offsetTop = document.querySelector('#searchBar').offsetTop
      // console.log(scrollTop, offsetTop)

      // 设置背景颜色的透明读
      if (scrollTop + 60 < offsetTop) {
        this.color = `rgb(${255 - 153 * (scrollTop / offsetTop)}, ${255 - 153 * (scrollTop / offsetTop)}, ${255 - 153 * (scrollTop / offsetTop)})`
        this.backColor = `rgba(255, 255, 255,${scrollTop / offsetTop})`
        this.slideColor = 'white'
        this.showWhite = true
        this.boxShadow = ''
      } else {
        this.color = '#666'
        this.backColor = 'rgba(255, 255, 255,1)'
        this.slideColor = '#295696'
        this.showWhite = false
        this.boxShadow = '0 5px 5px #3333330f'
      }
    },
    handleSelect(key, keyPath) {
      // console.log(key, keyPath)
    },
    slideAnimation() {
      $('.nav li').hover(
        function() {
          $('span', this)
            .stop()
            .css('height', '2px')
          $('span', this).animate(
            {
              left: '0',
              width: '100%',
              right: '0'
            },
            200
          )
        },
        function() {
          $('span', this)
            .stop()
            .animate(
              {
                left: '50%',
                width: '0'
              },
              200
            )
        }
      )
    }
  }
}
</script>

<style scoped>
.logo {

  margin: 0 15%;
  position: relative;
  top: -7px;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header {
  width: 100%;
  height: 65px;
  background: #252533;
  position: fixed;
  z-index: 4;
}
.nav {
  width: 90%;
  margin:5px auto;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
}
.nav ul{
    margin-left: auto
}
.nav ul li{
  height: 50px;
  line-height: 40px;
  float: left;
  padding: 10px 5px;
  position: relative;
}
.nav ul li a {
  height: 40px;
  line-height: 40px;
  padding: 20px 10px;
  margin: 0px 5px;
  color: #666;
  font-family: "pingFangSC-Regular";
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  text-shadow:4px 3px 5px rgba(16, 15, 15, 0.10);
}
.nav ul li a:hover {
  color: #295696;
  text-decoration: none;
}
.nav ul li span {
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  top: 58px;
  left: 50%;
}
</style>
